<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '350px'
			},
			autoResize: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				chartData: {},
				chart: null
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if(!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons');
				studyStatistical().then(res => {
					var time = [];
					var testTotal = [];
					var courseTotal = [];
					res.data.map(item => {
						time.push(item.time)
						testTotal.push(item.testTotal)
						courseTotal.push(item.courseTotal)
					})
					this.chart.setOption({
						title: {
							text: '最近学习人次',
							left:'center',
							textStyle:{
								'fontSize':'14px'
							}
						},
						xAxis: {
							data: time,
							boundaryGap: false,
							axisTick: {
								show: false
							}
						},
						grid: {
							left: 30,
							right: 50,
							bottom: 20,
							top: 30,
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							},
							padding: [5, 10]
						},
						yAxis: {
							axisTick: {
								show: false
							}
						},
						legend: {
							data: ['实验学习人次', '课程学习人次'],
							left: 'right',
						},
						series: [{
								name: '实验学习人次',
								itemStyle: {
									normal: {
										color: '#FF005A',
										lineStyle: {
											color: '#FF005A',
											width: 2
										}
									}
								},
								smooth: true,
								type: 'line',
								data: testTotal,
								animationDuration: 2800,
								animationEasing: 'cubicInOut'
							},
							{
								name: '课程学习人次',
								smooth: true,
								type: 'line',
								itemStyle: {
									normal: {
										color: '#3888fa',
										lineStyle: {
											color: '#3888fa',
											width: 2
										},
										areaStyle: {
											color: '#f3f8ff'
										}
									}
								},
								data: courseTotal,
								animationDuration: 2800,
								animationEasing: 'quadraticOut'
							}
						]
					})
				})
			},
		}
	}
</script>